<template>
  <div class="hanguo">
    <LoadingComponent v-slot="{ loadingFlag }" class="hanguo-banner">
      <img
        :src="'http://www.shxw114.com:9527/' + it.stu_nav"
        v-for="it in banner"
        v-if="loadingFlag"
        :key="it.stu_id"
      />
    </LoadingComponent>
    <div class="to">
      <div class="tuijian13">
        <h3 style="color: #666">韩国留学院校推荐</h3>
      </div>
      <div class="lxyk_cont">
        <div class="gj_yxshoulist">
          <LoadingComponent
            class="gj_yxshoulist1"
            v-slot="{ loadingFlag }"
            v-for="it in ModJypcgoDates"
            :key="it.cate_id"
          >
            <img
              :src="'http://www.shxw114.com:9527/' + it.jypc_logo"
              v-if="loadingFlag"
            />
          </LoadingComponent>
        </div>
      </div>
      <div class="country_floor4">
        <div class="country_floor4_title">
          <h2>海外院校推荐</h2>
          <span>more+</span>
        </div>
        <div class="country_floor4_list">
          <LoadingComponent
            v-slot="{ loadingFlag }"
            class="country_floor4_list1"
            v-for="it in haiwaiyuanxiaotuijianDates"
            :key="it.id"
          >
            <img :src="it.img" v-if="loadingFlag" />
            <p class="wzycslh">{{ it.name }}</p>
          </LoadingComponent>
        </div>
      </div>
      <div class="Walking-lantern">
        <el-carousel :interval="5000" arrow="always">
          <el-carousel-item
            class="Walking-lantern_img"
            v-for="it in losDates"
            :key="it.id"
          >
            <img :src="it.img" />
            <h2>{{ it.name }}</h2>
            <a href="">查看详情</a>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="major_list_2r_3">
        <p>快速获取韩国留学方案</p>
        <input type="text" placeholder="输入姓名" />
        <input type="text" placeholder="输入手机号" />
        <div class="yixianggj">
          <select>
            <option value="意向国家">意向国家</option>
          </select>
          <select>
            <option value="当前学历">当前学历</option>
            <option value="当前学历">初中</option>
            <option value="当前学历">高中</option>
            <option value="当前学历">专科</option>
            <option value="当前学历">本科</option>
            <option value="当前学历">硕士</option>
          </select>
        </div>
        <button class="input_btn">立即评估</button>
      </div>
      <LoadingComponent v-slot="{ loadingFlag }" class="hanguo-img">
        <img src="/img/韩国2.5c820b15.jpg" v-if="loadingFlag" />
      </LoadingComponent>
    </div>
    <FooterTwo />
    <InquiryHk />
  </div>
</template>

<script setup>
import { ref } from "@vue/reactivity";
import FooterTwo from "../../components/FooterTwo/index.vue";
import { ModGostudyGet, ModJypcgoGet } from "../../server/index.js";
import { axiosFun } from "../../axios/index.js";
import InquiryHk from "../inquiryHk/index.vue";
const banner = ref({});
const ModJypcgoDates = ref({});
const haiwaiyuanxiaotuijianDates = ref({});
const losDates = ref({});
const axios_ = async (v) => {
  const { data } = await v();
  return data;
};
(async (v) => {
  banner.value = await axios_(ModGostudyGet);
  ModJypcgoDates.value = await axios_(ModJypcgoGet);
  {
    const { data } = await axiosFun().post(
      "/JSON/haiwaixiaoyuantuijian/index.json"
    );
    haiwaiyuanxiaotuijianDates.value = data;
  }
  {
    const { data } = await axiosFun().post("/JSON/los.json");
    losDates.value = data;
  }
})();
</script>

<style scoped>
.hanguo {
  width: 100%;
  height: auto;
  margin-bottom: 3rem;
}
.hanguo-banner {
  width: 100%;
  height: 8rem;
}
.hanguo-banner img {
  width: 100%;
  height: 100%;
}
.Walking-lantern {
  width: 100%;
  height: 12rem;
  margin-top: 1rem;
}
.el-carousel {
  height: 100%;
}
.el-carousel div {
  height: 12rem;
}
.Walking-lantern_img {
  width: 100%;
  height: 100%;
}
.Walking-lantern_img img {
  width: 100%;
  height: 6rem;
}
.Walking-lantern_img h2 {
  width: 100%;
  color: #000;
  height: 1.2rem;
  line-height: 1.2rem;
  margin: 0.4rem 0;
  font-weight: 700;
  font-size: 1rem;
}
.Walking-lantern_img a {
  display: block;
  width: 5rem;
  height: 1.6rem;
  text-align: center;
  line-height: 1.6rem;
  font-size: 0.8rem;
  background: #444954;
  color: #fff;
  border-radius: 0.8rem;
  margin-top: 0.6rem;
}
.major_list_2r_3 {
  width: 100%;
  height: auto;
  box-shadow: 0 0 0.4rem #ccc;
  padding: 0 0.4rem;
  box-sizing: border-box;
}
.major_list_2r_3 > p {
  width: 100%;
  font-size: 1rem;
  text-align: center;
  line-height: 2rem;
  margin-bottom: 0.8rem;
}
.major_list_2r_3 > input {
  width: 100%;
  height: 1.5rem;
  padding-left: 0.4rem;
  box-sizing: border-box;
  font-size: 0.5rem;
  margin-bottom: 0.6rem;
  outline: none;
  border: none;
  border: 0.001rem solid #ccc;
}
.yixianggj {
  width: 100%;
  height: auto;
}
.yixianggj > select {
  width: 4rem;
  height: 1.4rem;
  padding-left: 0.4rem;
  border-color: #ccc;
  color: #666;
  margin-right: 0.8rem;
}
.major_list_2r_3 > .input_btn {
  width: 100%;
  height: 1.6rem;
  line-height: 1.6rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
  color: #fff;
  background: #0bc19d;
  outline: none;
  border: none;
  margin-top: 0.6rem;
}
.hanguo-img {
  width: 100%;
  height: auto;
  margin-top: 0.8rem;
}
.hanguo-img img {
  width: 100%;
  height: 100%;
}
</style>